<template>
  <!-- 搜索区域 -->
  <div class="search-section">
    <el-form :inline="true" :model="searchForm" class="search-form">
      <el-form-item label="商品名">
        <el-input 
          v-model="searchForm.name" 
          placeholder="请输入商品名" 
          clearable
          @keyup.enter="handleSearch"
        />
      </el-form-item>
     
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  
  
          
  <!-- 分页区域 -->
  <div class="pagination-section">
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[3, 6, 9, 18]"
      :total="filteredTableData.length"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

// 使用路由
const router = useRouter()

// 商品列表
const tableData = ref([
  { 
    id: 1, 
    name: '苹果', 
    comments: [
      { user: '张三', content: '非常新鲜，口感很好，推荐购买！', date: '2023-05-15' },
      { user: '李四', content: '甜度刚好，孩子很喜欢吃。', date: '2023-05-10' },
      { user: '王五', content: '包装很仔细，物流也很快。', date: '2023-05-05' }
    ]
  },
  { 
    id: 2, 
    name: '香蕉', 
    comments: [
      { user: '赵六', content: '成熟度正好，很香甜。', date: '2023-05-12' },
      { user: '钱七', content: '质量不错，下次还会再买。', date: '2023-05-08' }
    ]
  },
  { 
    id: 3, 
    name: '橙子', 
    comments: [
      { user: '孙八', content: '酸甜适中，汁水丰富。', date: '2023-05-14' },
      { user: '周九', content: '个头均匀，颜色鲜艳。', date: '2023-05-09' },
      { user: '吴十', content: '快递包装很好，没有损坏。', date: '2023-05-03' }
    ]
  },
  { 
    id: 4, 
    name: '葡萄', 
    comments: [
      { user: '郑一', content: '颗粒饱满，甜度很高。', date: '2023-05-16' }
    ]
  },
  { 
    id: 5, 
    name: '西瓜', 
    comments: [
      { user: '王二', content: '夏天必备，解暑神器！', date: '2023-05-11' },
      { user: '冯三', content: '很甜很脆，性价比高。', date: '2023-05-06' }
    ]
  },
  { 
    id: 6, 
    name: '桃子', 
    comments: [
      { user: '陈四', content: '桃子很新鲜，毛少肉厚。', date: '2023-05-13' }
    ]
  },
  { 
    id: 7, 
    name: '梨子', 
    comments: [
      { user: '褚五', content: '清甜多汁，润肺止咳。', date: '2023-05-07' },
      { user: '卫六', content: '口感爽脆，很满意。', date: '2023-05-02' }
    ]
  },
  { 
    id: 8, 
    name: '草莓', 
    comments: [
      { user: '蒋七', content: '又大又红，味道很棒！', date: '2023-05-15' },
      { user: '沈八', content: '洗了一下直接吃，很甜。', date: '2023-05-10' }
    ]
  },
  { 
    id: 9, 
    name: '芒果', 
    comments: [
      { user: '韩九', content: '香气浓郁，果肉细腻。', date: '2023-05-12' }
    ]
  },
  { 
    id: 10, 
    name: '菠萝', 
    comments: [
      { user: '杨十', content: '酸甜可口，很开胃。', date: '2023-05-08' },
      { user: '朱一', content: '新鲜好吃，价格实惠。', date: '2023-05-01' }
    ]
  },
  { 
    id: 11, 
    name: '樱桃', 
    comments: [
      { user: '秦二', content: '颜值很高，味道甜美。', date: '2023-05-14' }
    ]
  },
  { 
    id: 12, 
    name: '柠檬', 
    comments: [
      { user: '尤三', content: '很新鲜，用来泡水喝。', date: '2023-05-09' }
    ]
  },
  { 
    id: 13, 
    name: '柚子', 
    comments: [
      { user: '许四', content: '水分充足，有点甜。', date: '2023-05-11' }
    ]
  },
  { 
    id: 14, 
    name: '猕猴桃', 
    comments: [
      { user: '何五', content: '维C丰富，营养健康。', date: '2023-05-06' }
    ]
  },
  { 
    id: 15, 
    name: '石榴', 
    comments: [
      { user: '吕六', content: '籽粒饱满，颜色诱人。', date: '2023-05-13' }
    ]
  },
  { 
    id: 16, 
    name: '椰子', 
    comments: [
      { user: '施七', content: '椰汁清香，天然无添加。', date: '2023-05-05' }
    ]
  },
  { 
    id: 17, 
    name: '火龙果', 
    comments: [
      { user: '张八', content: '低热量，减肥必备水果。', date: '2023-05-16' }
    ]
  },
  { 
    id: 18, 
    name: '哈密瓜', 
    comments: [
      { user: '孔九', content: '香甜可口，家里人都爱吃。', date: '2023-05-07' }
    ]
  },
  { 
    id: 19, 
    name: '蓝莓', 
    comments: [
      { user: '曹十', content: '抗氧化佳品，品质很好。', date: '2023-05-12' }
    ]
  },
  { 
    id: 20, 
    name: '荔枝', 
    comments: [
      { user: '严一', content: '剥开就能吃，很方便。', date: '2023-05-04' }
    ]
  }
])

// 搜索表单
const searchForm = reactive({
  name: '',
  star: null
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 3
})

// 根据搜索条件过滤数据
const filteredTableData = computed(() => {
  return tableData.value.filter(item => {
    return (
      (searchForm.name ? item.name.includes(searchForm.name) : true) &&
      (searchForm.star ? item.star === searchForm.star : true)
    )
  })
})

// 计算当前页的数据
const paginatedTableData = computed(() => {
  const start = (pagination.currentPage - 1) * pagination.pageSize
  const end = start + pagination.pageSize
  return filteredTableData.value.slice(start, end)
})

// 编辑表单引用
const editFormRef = ref(null)

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1
}

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.currentPage = val
}

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
}

// 重置搜索
const resetSearch = () => {
  searchForm.name = ''
  searchForm.star = null
  pagination.currentPage = 1
}


// 跳转到详情页
const goToDetail = (item) => {
  // 这里可以跳转到详情页面，根据实际路由配置进行调整
  router.push(`/goods-detail/${item.id}`)
  // 或者使用 query 参数: 
  // router.push({ path: '/goods-detail', query: { id: item.date }})
}
</script>

<style scoped>
.search-section {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.search-form .el-form-item {
  margin-right: 20px;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.goods-section {
  min-height: 400px;
  margin-bottom: 20px;
}

.goods-card {
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.goods-content {
  text-align: center;
}

.goods-content h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.goods-content p {
  margin: 5px 0;
}
</style>